<template>
  <div>
      <search-head :title="title" :area="area"></search-head>
      <div class="wrap">
        <div class="title">地区</div>
        <form action="/" class="search_form">
            <van-search v-model="searchKey" placeholder="请输入搜索关键字"
            left-icon=""
            class="search"
            :clearable="false"
            @search="onSearch"
            @cancel="onCancel"
            />
            <span :class="searchKey.trim() ? 'search_btn':'none_btn'" @click="search1">查询</span>
            <!-- <van-button color='#3366be' class="search_btn" type="primary" size="large" @click="search1">查询</van-button> -->
            <!-- <img class="search_icon" src="./search.png" alt=""> -->
        </form>
      </div>
      <!-- <template slot='right-icon'>
            <van-icon name="search" />
        </template>  -->
        <div class="foot">本服务由咸宁市城市管理执法委员会提供</div>
  </div>
</template>

<script>
// ./assets/search.png
import SearchHead from "@/components/SearchHead.vue";
import { Toast } from 'vant';
export default {
    name: "Test",
    components: {
        SearchHead,
    },
    data(){
        return{
            title:'公厕查询',
            searchKey:'',
            area:'高新区'
        }
    },
    methods:{
        onSearch(val) {
            // alert('搜索成功'+this.searchKey+val);
            if(val && val.trim()){
                this.$router.push({path:'/test_detail',query:{searchKey:val}})
            }else{
                Toast('请输入搜索关键字');
            }
        },
        search1(){
            if(this.searchKey && this.searchKey.trim()){
                this.$router.push({path:'/test_detail',query:{searchKey:this.searchKey}})
            }else{
                Toast('请输入搜索关键字');
            }
            
        },
        onCancel() {
            Toast('已取消搜索');
        },
    }
}
</script>

<style lang='less'>
.wrap{
    margin: 10px 16px;
    .van-field__body input{
        height: 35px;
    }
    .title{
        margin-left: 13px;
        font-size: 0.94rem;
        color: #606876;
        font-weight: 500;
    }
    .search{
        position: relative;
    }
    .search_form{
        position: relative;
        text-align: center;
    }
    .search_icon{
        width: 25px;
        height: 25px;
        position: absolute;
        right: 22px;
        bottom: 20px;
    }
}
    .foot{
        width: 100%;
        position: fixed;
        color: #999999;
        bottom: 20px;
        text-align: center;
    }
    .search_btn{
        display: block;
        width: 320px;
        height: 35px;
        background: #3366be;
        text-align: center;
        line-height: 35px;
        color: #fff;
        margin-left: 12px;
        border-radius: 4px;
    }
    .none_btn{
        background: #bec1c5;
        display: block;
        width: 320px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        color: #fff;
        margin-left: 12px;
        border-radius: 4px;
    }
</style>